<template>
  <div class="search-box">
    <div class="search-input">
      <!-- 需要优化，点击搜索按钮不能搜索 -->
      <img src="@/assets/img/home/search.svg" @click="search"/>
      <input
        type="text"
        :placeholder="plhText"
        maxlength="10"
        v-model="inputValue"
        @keyup.enter="search"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "searchInput", // 搜索输入框
  methods: {
    search(){
      this.$parent.searchInputChange(this.inputValue)
      this.inputValue = ''
    }
  },
  props: {
    // input框占位文字
    plhText: {
      type: String,
      default: "请输入目的地..."
    }
  },
  data() {
    return {
      inputValue: "" ,//输入框的值
      isShow: false,//是否展示搜索内容提示框
    };
  },
  watch: {
    // 监视输入框内值的变化
    inputValue (newValue,oldValue){
      this.isShow = true
      this.$bus.$emit('is-show',this.isShow)
      this.$bus.$emit('changeSearchValue',newValue)
    }
}
};
</script>
<style scoped>
/* 设置搜索框样式 */
.search-input {
    display: flex;
    height: 50px;
    width: 200px;
    text-align: center;
}
/* 搜索图片样式 */
img {
    flex: 1;
    height: 30px;
    width: 30px;
    margin: 5px;
}
/* 输入框样式 */
input {
    flex: 3;
    height: 40px;
    width: 100px;

    border-radius: 10px;
    border: none;
    padding: 5px;
}
input:focus {
    outline: none;
}
</style>
